<script lang="ts" setup>
import {ref, watchEffect} from "vue"
import type {CommentItem, ReplyItem} from "@/types/comment";
import {CommentSortType, CommentType} from "@/enum/comment";
import {onReachBottom} from "@dcloudio/uni-app";
import {useUserStore} from "@/stores/user";
import {IMessage} from "@/components/aw-message/message";
import {formatDate, formatTimeDifference} from "@/utils/time";

onReachBottom(() => {
  // 加载更多
  console.log("触底了")
})
/**
 * @emits emit 评论时触发事件
 */
const emit = defineEmits<{
  sort: [sort: CommentSortType]
  like: [data: { type: CommentType, index: number }] // 点击点赞时触发返回对应评论索引和类型
  dislike: [index: number] // 只有一级评论有点踩，如果需要回复支持，可以按照like事件处理
  report: [commentId: number] // 点击举报时触发
  delete: [commentId: number] // 点击删除时触发
  deleteReply: [replyId: number] // 点击删除回复时触发
  share: [shareItem: CommentItem] // 点击分享时触发
  clickInput: [] // 点击底部评论框触发
  sendComment: [content: string] // 点击发送评论时触发
  sendReply: [replyDetail: {
    content: string,
    commentId: number,
    toUserId: number,
    toUserName: string,
    type: 0 | 1,
    originId: number
  }] // 点击发送回复时触发
  clickCommentItem: [commentItem: CommentItem] // 点击评论项时触发
  clickReply: [replyData: { type: CommentType, index: number }] // 点击回复时触发
  clickTotalReply: [commentId: number] // 点击加载全部回复时触发
}>()
/**
 * 接收的数据
 */
const props = withDefaults(defineProps<{
  commentList?: CommentItem[] //评论列表数据
  replyList?: ReplyItem[],
  userId?: string, // 当前登录用户的id(如果不传可能会影响评论的删除展示)
  noMore?: boolean,
  showCommentInput?: boolean,
}>(), {
  commentList: () => [],
  replyList: () => [],
})
const popupToLogin = ref()
const currentSortType = ref<CommentSortType>(CommentSortType.LIKES) // 当前排序方式
const userStore = useUserStore()
/**
 * 点击排序方式
 */
const onSortClick = () => {
  if (currentSortType.value === CommentSortType.LIKES) {
    currentSortType.value = CommentSortType.TIME
    emit('sort', currentSortType.value)
  } else if (currentSortType.value === CommentSortType.TIME) {
    currentSortType.value = CommentSortType.LIKES
    emit('sort', currentSortType.value)
  }
}

/*展开*/
const unfoldList = ref<boolean[]>([])
watchEffect(() => { //初始化时执行一次
  if (props.commentList) {
    unfoldList.value = new Array(props.commentList.length).fill(false)
  }
})
/**
 * 点击展开
 * @param index 展开评论索引
 */
const handleUnfold = (index: number) => {
  unfoldList.value[index] = !unfoldList.value[index]
}
/*点击底部评论输入框*/
const onClickEmoji = () => {
  uni.showToast({title: '暂不支持表情输入', icon: 'none'})
}
const commentPopup = ref() // 输入框弹出层实例
const onClickInput = () => {
  emit('clickInput')
}
const currentCommentId = ref() // 当前详情评论id
const currentCommentUserId = ref() // 当前回复所在的主评论用户id
const currentCommentIndex = ref(-1) // 当前详情评论索引
const replyPopup = ref() // 回复弹出层实例
const isShowInput = ref(true) // 是否显示底部评论输入框
const currentComment = ref<CommentItem>({} as CommentItem)
/**
 * 当底部评论输入框状态改变时触发
 * @param event 返回当前弹出层的状态
 */
const onChangePopup: UniHelper.UniPopupOnChange = (event) => {
  isShowInput.value = !event.show
  // 关闭时重置
  if (!event.show) {
    commentContent.value = ''
    if (currentCommentIndex.value === -1) { // 位于评论列表
      currentReplyIndex.value = -1
    } else {
      currentReplyIndex.value = currentCommentIndex.value // 位于评论回复列表
      toUserName.value = props.commentList[currentCommentIndex.value].userName
      toUserId.value = props.commentList[currentCommentIndex.value].userId
      replyCommentId.value = props.commentList[currentCommentIndex.value].commentId
      replyType.value = 0
    }
  }
}
const commentContent = ref() //  用户评论绑定的值
/**
 * 提示用户输入限制
 */
const onInputComment = () => {
  if (commentContent.value.length >= 150) {
    uni.showToast({title: '评论内容不能超过150字', icon: 'none'})
  }
}
/**
 *  发送评论
 */
const onSendComment = () => {
  if (commentContent.value.length <= 0) {
    return
  }
  // 如果currentReplyIndex.value===-1说明现在用户未处于回复评论状态，即评论对象为当前动物
  const type = currentReplyIndex.value === -1 ? CommentType.COMMENT : CommentType.REPLY
  if (!commentContent.value) {
    return uni.showToast({title: '评论内容不能为空', icon: 'none'})
  }
  if (type === CommentType.COMMENT) {
    emit('sendComment', commentContent.value) // 提交评论事件
  } else if (type === CommentType.REPLY) {
    const data = {
      content: commentContent.value,
      commentId: currentCommentId.value, // 无论是评论还是回复或者回复的回复，发送时都只需要评论id即可
      toUserId: toUserId.value,
      toUserName: toUserName.value,
      type: replyType.value,
      originId: replyCommentId.value
    }
    emit('sendReply', data) // 提交回复事件
  }

}

/**
 * 点击查看评论所有回复
 * @param commentId 评论id
 * @param index 评论索引
 */
const onClickTotalReply = (commentId: number, index: number) => {
  currentCommentId.value = commentId
  currentCommentUserId.value = props.commentList[index].userId
  currentCommentIndex.value = index
  currentComment.value = props.commentList[index]
  // 修改当前回复对象
  currentReplyIndex.value = index
  toUserName.value = props.commentList[index].userName
  toUserId.value = props.commentList[index].userId
  replyCommentId.value = props.commentList[index].commentId
  emit('clickTotalReply', commentId)
  // 打开回复弹出层
}
// 由父级控制其打开
const openReplyPopup = () => {
  replyPopup.value.open()
}
/**
 * 关闭回复弹出层
 */
const onCloseReplyPopup = () => {
  replyPopup.value.close()
}
/**
 * 当回复弹出层变化时触发,主要作用是用户来重置当前评论状态，在关闭后评论状态处于对主体
 * @param event
 */
const onChangeReplyPopup: UniHelper.UniPopupOnChange = (event) => {
  if (!event.show) {
    currentReplyIndex.value = -1
    currentCommentIndex.value = -1
  }
}
const replySort = ref<0 | 1>(0) // 回复排序1：按时间排序，0：按热度排序(默认)
/**
 * 回复排序（因为回复默认是一次获取完，所以这里就没有必要去提交事件）
 */
const onSortReply = () => {
  replySort.value = replySort.value === 0 ? 1 : 0
  if (replySort.value === 0) {
    props.replyList.sort((a, b) => b.likes - a.likes)
  } else if (replySort.value === 1) {
    props.replyList.sort((a, b) => {
      const dateA = new Date(a.createTime).getTime()
      const dateB = new Date(b.createTime).getTime()
      return dateB - dateA
    })
  }
}

// 评论类型
const CommentTypes = CommentType
/**
 * 点赞时触发
 * @param type 点赞类型
 * @param index 点赞的评论索引
 */
const handleLike = (type: CommentType, index: number) => {
  if (userStore.userInfoData?.userID === undefined) {
    popupToLogin.value.open()
  }
  // 此处建议节流，节流可在外部处理
  emit('like', {type, index})
}
/**
 *  点踩时触发
 * @param index 点踩的评论索引
 */
const handleDislike = (index: number) => {
  if (userStore.userInfoData?.userID === undefined) {
    popupToLogin.value.open()
  }
  emit('dislike', index)
}

const currentReplyIndex = ref(-1) // 当前回复的索引（点击回复，用来区分是评论还是回复）
const toUserName = ref('') // 被回复人的名字，因为要区别评论和回复所以需要
const replyCommentId = ref() // 被回复的评论的id
const toUserId = ref() // 被回复人的id
const replyType = ref<0 | 1>(0) // 当前回复的类型
// const originId=ref() // 回复的直接父级id
/**
 *  点击评论回复触发
 *  @param type 回复类型
 * @param index
 * @param isOut
 */
const handleReply = (type: CommentType, index: number, isOut: boolean) => {
  isOut ? currentCommentId.value = props.commentList[index].commentId : ''
  if (!userStore.userInfoData) {
    const platform = uni.getSystemInfoSync().uniPlatform
    if (platform === 'app' || platform === 'web') {
      popupToLogin.value.open()
      return IMessage({
        content: '请先登录',
        type: 'error',
        showIcon: true,
      })
    } else {
      return uni.showToast({title: '请先登录', icon: 'none'})
    }
  }
  if (type === CommentTypes.COMMENT) { // 当前回复的是评论
    toUserName.value = props.commentList[index].userName
    replyCommentId.value = props.commentList[index].commentId
    toUserId.value = props.commentList[index].userId
    replyType.value = 0
  } else { // 当前回复是评论的回复
    toUserName.value = props.replyList[index].userReplyName
    replyCommentId.value = props.replyList[index].replyId
    toUserId.value = props.replyList[index].userReplyId
    replyType.value = 1
  }
  currentReplyIndex.value = index // 点击弹出回复评论
  commentPopup.value.open() // 打开评论弹出层
  emit('clickReply', {type, index})
}

/**
 * 点击更多
 * @param commentId 当前评论id
 *  @param userId 当前评论人id
 * @param type
 */
const handleMore = (commentId: number, userId: number, type: 0 | 1) => {
  const itemList = Number(props.userId) === userId ? ['删除评论'] : ['举报该评论']
  uni.showActionSheet({
    itemList: itemList,
    itemColor: '#39c5bb',
    success: function () {
      if (Number(props.userId) !== userId) {
        uni.showModal({
          title: '提示',
          content: '确定要举报该评论吗？',
          confirmColor: '#39c5bb',
          cancelText: '手滑了',
          confirmText: '举报评论',
          success: function (res) {
            if (res.confirm) {
              onReportComment(commentId)
            }
          }
        })
      } else if (Number(props.userId) === userId) {
        uni.showModal({
          title: '提示',
          content: '确定要删除该评论吗？',
          confirmColor: '#39c5bb',
          cancelText: '手滑了',
          confirmText: '删除评论',
          success: function (res) {
            if (res.confirm) {
              if (type === CommentType.COMMENT) {
                onDeleteComment(commentId)
              } else if (type === CommentType.REPLY) {
                emit('deleteReply', commentId)
              }
            }
          }
        })
      }
    },
    fail: function () {
    }
  })
}
/**
 * 用户确认删除（只有本人评论可以删除）
 * @param commentId
 */
const onDeleteComment = (commentId: number) => {
  emit('delete', commentId)
}
/**
 * 举报评论
 * @param commentId 被举报的id
 */
const onReportComment = (commentId: number) => {
  if (!userStore.userInfoData) {
    const platform = uni.getSystemInfoSync().uniPlatform
    if (platform === 'app' || platform === 'web') {
      popupToLogin.value.open()
      return IMessage({
        content: '请先登录',
        type: 'error',
        showIcon: true,
      })
    } else {
      return uni.showToast({title: '请先登录', icon: 'none'})
    }
  }
  emit('report', commentId)
}

/**
 *  长按复制评论
 * @param content 评论内容
 * @param userName 评论人名称
 */
const handleCopyComment = (content: string, userName: string) => {
  // 复制评论
  uni.setClipboardData({
    data: `${userName}: ${content}`,
    success: function () {
      uni.showToast({
        title: `已复制${userName}的评论内容`,
        icon: 'none'
      })
    }
  })
}

/**
 * 分享
 * @param comment
 */
const handleShare = (comment: CommentItem) => {
  emit('share', comment)
}

const loadMore = () => {
  console.log('loadMore')
}
/**
 * 暴露方法
 */
defineExpose<{
  onClickInput: () => void
  openReplyPopup: () => void
  onCloseReplyPopup: () => void
  commentPopup: typeof commentPopup
}>({
  onClickInput,
  openReplyPopup,
  onCloseReplyPopup,
  commentPopup
})
const moveHandle = () => {
}

const goUserHomepage = (userId: number) => {
  if (!userStore.userInfoData?.userID) {
    popupToLogin.value.open()
    return IMessage({
      content: '请先登录',
      type: 'error',
      showIcon: true,
    })
  }
  const type = userStore.userInfoData?.userID === userId ? 0 : 1
  uni.navigateTo({url: '/subPkg/userHomepage/userHomepage?type=' + type + '&userId=' + userId})
}
const gotoLogin = () => {
  popupToLogin.value.close()
  uni.navigateTo({url: '/subPkg/login/login'})
}
</script>

<template>
  <scroll-view :refresher-enabled="false" :scroll-y="true" style="height: 100%">
    <!--  评论为空时  -->
    <view v-if="commentList?.length < 1" class="flex justify-center align-center flex-column" style="width: 100%">
      <image mode="aspectFit" src="/static/empty-comment.png" style="width: 200rpx;height: 200rpx"></image>
      <text class="text-gray">暂无评论，快来抢沙发吧ヾ(≧▽≦*)o</text>
    </view>

    <!--  评论列表  -->
    <view v-else>

      <!--  评论区头部    -->
      <view class="flex justify-between padding-lr-lg" style="width: 100%">
        <text class="text-gray text-df">{{ currentSortType === CommentSortType.LIKES ? '精彩评论' : '最新评论' }}</text>
        <text class="text-gray text-df cuIcon-sort" @click="onSortClick">
          {{ currentSortType === CommentSortType.LIKES ? '按时间' : '按热度' }}
        </text>
      </view>

      <!--   评论主体   -->
      <view class="comment-list flex flex-column align-center padding-lr-sm">
        <!--  评论列表  -->
        <view v-for="(item, index) in commentList" :key="item.commentId" class="comment-list-item flex flex-column">
          <!--     评论表头像名称时间     -->
          <view class="flex align-center">
            <uv-avatar :src="item.userAvatar" mode="aspectFill"
                       size="70rpx"
                       @click="goUserHomepage(item.userId)"></uv-avatar>
            <view class="flex flex-column justify-center margin-left-sm">
              <text class="text-df" style="color: #707070">{{ item.userName }}</text>
              <text class="text-gray text-xs" style="margin-top: 5px">
                {{ formatTimeDifference(new Date(item.createTime).getTime(), Date.now()) }}
              </text>
            </view>
          </view>

          <!--     评论内容     -->
          <view class="content margin-top-sm">
            <view class="text-black text-df" style="align-self: center">
              <text space="emsp" style="line-height: 30rpx" @longpress="handleCopyComment(item.content, item.userName)"
                    @tap="handleReply(CommentTypes.COMMENT, index,true)">
                {{
                  item.content.length > 80 && !unfoldList[index] ? item.content.substring(0, 80) + '... ' : item.content
                }}
              </text>
              <text v-show="item.content.length > 80" class="text-awGreen text-df" style="white-space: nowrap"
                    @click="handleUnfold(index)">{{ !unfoldList[index] ? '展开' : '收起' }}
              </text>
            </view>
          </view>

          <!--      评论点赞点踩，回复   -->
          <view class="content-bottom flex align-center justify-start margin-top-sm" style="position: relative">
            <view class="flex align-center margin-right-sm">
              <uni-icons :color="item.liked ? '#39c5bb' : '#aaa'" :type="item.liked ? 'hand-up-filled' : 'hand-up'"
                         size="20" @tap="handleLike(CommentTypes.COMMENT, index)"></uni-icons>
              <text class="text-gray text-sm">{{ item.likes }}</text>
            </view>
            <view :style="{ transform: 'rotateY(180deg)' }" class="flex align-center margin-lr-sm">
              <uni-icons :color="item.disliked ? '#39c5bb' : '#aaa'"
                         :type="item.disliked ? 'hand-down-filled' : 'hand-down'" size="20"
                         @tap="handleDislike(index)"></uni-icons>
            </view>
            <view class="flex align-center margin-lr-sm">
              <uni-icons :type="'redo'" color="#aaa" size="20" @tap="handleShare(item)"></uni-icons>
            </view>
            <view class="flex align-center margin-lr-sm">
              <uni-icons :type="'chatbubble'" color="#aaa" size="20"
                         @tap="handleReply(CommentTypes.COMMENT, index,true)"></uni-icons>
            </view>
            <view class="flex align-center margin-lr-sm"
                  style="position: absolute;top:50%;transform:translateY(-50%);right: 10rpx">
              <text class="cuIcon-moreandroid line-gray" style="font-size: 24rpx"
                    @tap="handleMore(item.commentId, item.userId,CommentType.COMMENT)"></text>
            </view>
          </view>

          <!--      回复区    -->
          <view v-show="item.replyCount > 0" class="content-reply margin-top-sm"
                @click="onClickTotalReply(item.commentId, index)">
            <!--     默认只展示2条回复    -->
            <view v-for="(reply, replyIndex) in item.replyList?.slice(0, 2)" :key="reply.replyId"
                  class="margin-bottom-xs">
              <text class="text-sm" style="color: #3ebed3">{{ reply.userReplyName }}</text>
              <text v-show="reply.toUserId === item.userId" class="text-gray text-sm">
                ：{{ reply.content.length > 40 ? reply.content.slice(0, 40) + '...' : reply.content }}
              </text>
              <text v-show="reply.toUserId !== item.userId" class="text-gray text-sm">
                回复
                <text class=" text-sm" style="color: #3ebed3">{{ '@' + reply.toUserName }}</text>
                ：{{ reply.content.length > 40 ? reply.content.slice(0, 40) + '...' : reply.content }}
              </text>
            </view>
            <!--     展开更多回复    -->
            <view class="flex align-center justify-end">
              <text class="text-gray text-sm" style="color: #3ebed3" @click="onClickTotalReply(item.commentId, index)">
                共{{
                  item.replyCount
                }}条回复
              </text>
              <uni-icons color="#3ebed3" size="14" type="forward"></uni-icons>
            </view>
          </view>
        </view>

        <view v-show="noMore" class="text-gray justify-center align-center text-df margin-top-sm">
          已经没有更多评论了哟(≧∀≦)ゞ
        </view>
      </view>

    </view>

    <!--    底部评论框-->
    <view v-show="isShowInput&&showCommentInput"
          :style="{ position: 'fixed', bottom: 0, width: '100%', zIndex: '100' }">
      <view class="bg-white flex justify-around align-center" style="width: 100%;height: 100rpx;">
        <text class="round text-gray flex align-center justify-center"
              style="background-color:#f4f4f4;width: 80%;height: 60%" @click="onClickInput">发个友好的评论吧q(≧▽≦q)~
        </text>
        <!--        <text class="cuIcon-emoji line-gray text-shadow" style="font-size: 44rpx" @tap="onClickEmoji"></text>-->
      </view>
    </view>
  </scroll-view>

  <!--  回复列表-->
  <view @touchmove.stop.prevent="moveHandle">
    <uni-popup ref="replyPopup" background-color="rgba(0,0,0,0)" mask-background-color="rgba(0,0,0,0.3)" type="bottom"
               @change="onChangeReplyPopup">
      <scroll-view :scroll-y="true" style="width: 100%;height: 65vh;padding-top: 80rpx;background: #fff">
        <!--评论详情头部-->
        <view class="flex align-center justify-between padding-sm bg-white"
              style="position: fixed;top: 0;height: 80rpx;width: 100%;z-index: 100;border-bottom: #e6e6e6 1px solid;border-radius: 20rpx 20rpx 0 0">
          <text class="text-df text-black">评论详情</text>
          <text class="cuIcon-roundclosefill text-shadow line-awGreen" style="font-size: 36rpx"
                @tap="onCloseReplyPopup"></text>
        </view>

        <!--   主评论  -->
        <view class="comment-list-item flex flex-column bg-white" style="margin-top: 0">
          <!--     评论表头像名称时间     -->
          <view class="flex align-center">
            <uv-avatar :src="currentComment.userAvatar" mode="aspectFill"
                       size="70rpx"
                       @click="goUserHomepage(currentComment.userId)"></uv-avatar>
            <view class="flex flex-column justify-center margin-left-sm">
              <text class="text-df" style="color: #707070">{{ currentComment.userName }}</text>
              <text class="text-gray text-xs">{{ formatDate(Date.parse(currentComment.createTime)) }}</text>
            </view>
          </view>

          <!--     评论内容     -->
          <view class="content margin-top-sm">
            <view class="text-black text-df" style="align-self: center">
              <text space="emsp" style="line-height: 30rpx"
                    @longpress="handleCopyComment(currentComment.content, currentComment.userName)">
                {{ currentComment.content }}
              </text>
            </view>
          </view>

          <!--      评论点赞点踩，回复，（转发后续完善）   -->
          <view class="content-bottom flex align-center justify-start margin-top-sm margin-bottom-sm"
                style="position: relative;">
            <view class="flex align-center margin-right-sm">
              <uni-icons :color="currentComment.liked ? '#39c5bb' : '#aaa'"
                         :type="currentComment.liked ? 'hand-up-filled' : 'hand-up'" size="20"
                         @click="handleLike(CommentTypes.COMMENT, currentCommentIndex)"></uni-icons>
              <text class="text-gray text-sm">{{ currentComment.likes }}</text>
            </view>
            <view :style="{ transform: 'rotateY(180deg)' }" class="flex align-center margin-lr-sm">
              <uni-icons :color="currentComment.disliked ? '#39c5bb' : '#aaa'"
                         :type="currentComment.disliked ? 'hand-down-filled' : 'hand-down'" size="20"
                         @click="handleDislike(currentCommentIndex)"></uni-icons>
            </view>
            <view class="flex align-center margin-lr-sm">
              <uni-icons :type="'redo'" color="#aaa" size="20"></uni-icons>
            </view>
            <view class="flex align-center margin-lr-sm">
              <uni-icons :type="'chatbubble'" color="#aaa" size="20"
                         @click="handleReply(CommentTypes.COMMENT, currentCommentIndex,false)"></uni-icons>
            </view>
            <view class="flex align-center margin-lr-sm"
                  style="position: absolute;top:50%;transform:translateY(-50%);right: 10rpx">
              <text class="cuIcon-moreandroid line-gray" style="font-size: 24rpx"></text>
            </view>
          </view>
        </view>

        <!--    回复区顶部  -->
        <view class="flex justify-between padding-lr-lg bg-white padding-top-sm"
              style="width: 100%;border-top: #e6e6e6 3px solid">
          <text class="text-gray text-df">相关回复{{ currentComment.replyCount }}条</text>
          <text class="text-gray text-df cuIcon-sort" @click="onSortReply">
            {{ replySort === 0 ? '按时间' : '按热度' }}
          </text>
        </view>

        <!--    回复区列表  -->
        <view style="padding-bottom: 100rpx">
          <view v-for="(reply, index) in replyList" :key="reply.userReplyName"
                class="comment-list-item flex flex-column bg-white" style="margin-top: 0">
            <!--     评论表头像名称时间     -->
            <view class="flex align-center">
              <uv-avatar :src="reply.userReplyAvatar" mode="aspectFill"
                         size="70rpx"
                         @click="goUserHomepage(reply.userReplyId)"></uv-avatar>
              <view class="flex flex-column justify-center margin-left-sm">
                <text class="text-df" style="color: #707070">{{ reply.userReplyName }}</text>
                <text class="text-gray text-xs">{{ formatDate(Date.parse(reply.createTime.toString())) }}</text>
              </view>
            </view>

            <!--     评论内容     -->
            <view class="content margin-top-sm">
              <view class="text-black text-df" style="align-self: center">
                <text v-show="reply.toUserId === currentCommentUserId" space="emsp" style="line-height: 30rpx"
                      @longpress="handleCopyComment(reply.content, reply.userReplyName)">
                  {{ reply.content }}
                </text>
                <view v-show="reply.toUserId !==currentCommentUserId" style="line-height: 30rpx">
                  <text style="line-height: 30rpx">回复
                    <text class="line-awGreen" style="line-height: 30rpx">{{ '@' + reply.toUserName }}</text>
                    ：{{ reply.content }}
                  </text>
                </view>
              </view>
            </view>

            <!--      回复点赞点踩   -->
            <view class="content-bottom flex align-center justify-start margin-top-sm margin-bottom-sm"
                  style="position: relative;">
              <view class="flex align-center margin-right-sm">
                <uni-icons :color="reply.liked ? '#39c5bb' : '#aaa'" :type="reply.liked ? 'hand-up-filled' : 'hand-up'"
                           size="20" @click="handleLike(CommentTypes.REPLY, index)"></uni-icons>
                <text class="text-gray text-sm">{{ reply.likes }}</text>
              </view>
              <!--            <view :style="{ transform: 'rotateY(180deg)' }" class="flex align-center margin-lr-sm">
                            <uni-icons :color="reply.disliked?'#39c5bb':'#aaa'"
                                       :type="reply.disliked?'hand-down-filled':'hand-down'"
                                       size="20"></uni-icons>
                          </view>-->
              <view class="flex align-center margin-lr-sm">
                <uni-icons :type="'chatbubble'" color="#aaa" size="20"
                           @click="handleReply(CommentTypes.REPLY, index,false)"></uni-icons>
              </view>
              <view class="flex align-center margin-lr-sm"
                    style="position: absolute;top:50%;transform:translateY(-50%);right: 10rpx">
                <text class="cuIcon-moreandroid line-gray" style="font-size: 24rpx"
                      @tap="handleMore(reply.replyId, reply.userReplyId,CommentType.REPLY)"></text>
              </view>
            </view>

          </view>
          <view class="flex justify-center text-gray bg-white" style="width: 100%;height: 40rpx">这里什么都没有了(✿◡‿◡)
          </view>
        </view>
      </scroll-view>
    </uni-popup>
  </view>


  <!-- 评论输入框弹出 -->
  <view @touchmove.stop.prevent="moveHandle">
    <uni-popup ref="commentPopup" type="center" @change="onChangePopup">
      <view class="bg-white flex flex-column justify-between align-center padding-sm padding-tb-lg"
            style="width: 90vw;height: 30vh;border-radius: 20rpx 20rpx;overflow: hidden;">
      <textarea v-model="commentContent" :adjust-position="false" :auto-height="true" :cursor-color="'#35c9bb'"
                :focus="true"
                :maxlength="150"
                :placeholder="currentReplyIndex == -1 ? '发一条友善的评论吧~' : '回复@' + toUserName + '：'"
                :show-confirm-bar="false" style="width: 100%"
                @input="onInputComment"/>
        <button :class="[commentContent?.length>0?'bg-gradual-awGreen':'bg-aw-gray']"
                class="round shadow flex align-center justify-center text-white text-lg"
                style="width: 85%;min-height: 80rpx;height: 80rpx" @click="onSendComment">发布
        </button>
      </view>
    </uni-popup>
  </view>

  <uni-popup ref="popupToLogin" type="dialog">
    <uni-popup-dialog confirm-text="前往登录" content="是否前往登录？" title="提示" type="info"
                      @confirm="gotoLogin"></uni-popup-dialog>
  </uni-popup>
</template>

<style lang="scss" scoped>
.comment-list {
  width: 100%;

  &-item {
    width: 100%;
    min-height: 100rpx;
    margin-top: 20rpx;
    padding: 20rpx;
    border-bottom: #dbdbdb 1px solid;

    .content,
    .content-bottom,
    .content-reply {
      width: 90%;
      align-self: flex-end;
    }

    .content-reply {
      border-radius: 10rpx;
      background-color: #f5f5f5;
      padding: 10rpx;
      min-height: 60rpx;
      max-height: 260rpx;
    }
  }
}

.comment-input {
  position: fixed;
  bottom: 0;
}
</style>